<template>
    <el-table  :data="relationWaiters" style="width:fit-content;max-width:fit-content;margin-bottom:10px">
        <el-table-column type="index" label="序号" align="center" width="120px">
        </el-table-column>
        <el-table-column prop="waiterName" label="服务员" width="200" align="center">

        </el-table-column>

        <el-table-column label="准备时间" width="200" align="center">
            <template slot-scope="{row}" >
               <el-input v-model="row.prepareTime" v-maxnum="{obj:row,key:'prepareTime',int:true}" placeholder="准备时间"></el-input>
            </template>
        </el-table-column>
        <el-table-column label="服务时间" width="200" align="center">
            <template slot-scope="{row}" >
               <el-input v-model="row.serviceTime" v-maxnum="{obj:row,key:'serviceTime',int:true}" placeholder="服务时间"></el-input>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
  props: {
    waiters: {
      // 服务员列表
      type: Array,
      default: () => []
    },
    relationWaiters: {
      // 服务员生成的带时间的列表
      type: Array,
      default: () => []
    },
  },
  watch: {
    waiters:{
      handler(waiters) {
          const {relationWaiters} = this
          const arr = []
          waiters.forEach((item,index) => {
              const target = relationWaiters.find(item2=>item.id === item2.waiterId)
              const obj = {
                  waiterId: item.id,
                  waiterName: item.name,
                  prepareTime:target&&target.prepareTime||"",
                  serviceTime:target&&target.serviceTime||"",
              }
              arr.push(obj)

          });
  
          this.$Utils.clearArr(relationWaiters)
          this.$Utils.concatArr(relationWaiters,arr)
      },
      immediate:true
    }
  },
  mounted(){

  },
  methods:{

  }
};
</script>

<style lang="scss" scoped></style>
